{% extends "nav.html" %}
{% block little %}主机信息{% endblock %}
{% block content %}
    <!-- Main Content -->
    <style>
        .div-inline{ display:inline}
    </style>
    <div class="container-fluid">
        <div class="side-body">
            <div class="page-title">
                <span class="title">主机信息查看</span>
                <div class="description">网服所有主机信息查看</div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="card">
                        <div class="card-header">

                            <div class="card-title">
                                <div class="title">主机列表</div>
                            </div>
                        </div>
                        <div class="panel panel-default panel-warning">
                            <div class="panel-heading">
                                <h3 class="panel-title">查询条件</h3>
                            </div>
                            <div style="width: 50%">
                                <table class="table table-condensed">
                                    <tr>
                                        <th>搜索类型：</th>
                                        <th>
                                            <select id="host_sea" class="form-control">
                                                <option name="q">综合搜索</option>
                                            </select>
                                        </th>
                                        <th>
                                            <input type="text" class="form-control" id="host_text" placeholder="选择为空查询所有">
                                        </th>
                                        <th>
                                            <button type="button" class="btn btn-default" id="host_search">搜索</button>
                                        </th>

                                    </tr>
                                </table>

                            </div>


                        </div>
                        <div class="panel panel-default  panel-success">
                            <div class="panel-heading">
                                <h3 class="panel-title">查询结果</h3>
                            </div>
                            <div class="panel-body">
                                <table class=" table table-striped table-hover" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>厂商</th>
                                        <th>型号</th>
                                        <th>sn</th>
                                        <th>地址</th>
                                        <th>主机名称</th>
                                        <th>业务系统</th>
                                        <th>业务类型</th>
                                        <th style="width:auto" >设备wwn</th>
                                    </tr>
                                    </thead>
                                    <tbody id="host_data">
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        $("#host_search").click(function () {
            var text = $("#host_text").val()
            $("#host_data").empty()
            var host_sea = $("#host_sea").find("option:selected").attr("name");
            $('#waitting').modal({backdrop: 'static', keyboard: false},'toggle')
            $.ajax({
                url: "{% url "host_search_ajax" %}",
                type: 'POST',
                data:{id:host_sea,text:text},
                success: function(data){
                    var obj = JSON.parse(data);
                    if(obj.status){
                        $("#host_data").append(obj.data)
                        $('#waitting').modal('hide')
                    }else{
                    };
                }
            });
        })
    </script>
{% endblock %}